<!DOCTYPE html>
<html>

<head>
  <title>首页</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/flexslider.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/responsive.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <style>
    .movie {
      font-size: 24px;
      color: black;
      font-style: normal;
      font-weight: 900;
      border-bottom: 1px solid red;
    }
  </style>
</head>

<body>


  <section class="tophead" role="tophead">
    <!-- Navigation Section -->
    <header id="header">
      <% if(!douban.username){%>
        <a href="/login">登录</a>
        <a href="/registor">注册</a>
        <%}else{%>
          你好:<%= douban.username %>
            <a href="/logout">退出</a>
            <%}%>
              <div class="header-content clearfix"><a href="/" class="logo"></a>
                <nav class="navigation" role="navigation">
                  <ul class="primary-nav">
                    <li><a href="#header-slider">HOME</a></li>
                    <li><a href="#services">最新电影</a></li>
                    <li><a href="#portfolio">最热影片</a></li>
                    <li><a href="#testimonials">即将上映</a></li>
                    <li><a href="#service">北美排行榜</a></li>
                  </ul>
                </nav>
                <a href="#" class="nav-toggle">Menu<span></span></a> </div>
    </header>
    <!-- Navigation Section -->
  </section>


  <section id="header-slider" class="section">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="background:gray;">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">

        <% douban.carousel.forEach(function(item,index){%>
          <div class="item <% if(index===0){%>active<%}%>">

            <div class="container">
              <img class="first-slide" src="<%= item.images.large %>" alt="<%= item.title %>" style="display:inline-block;margin-left:60px;margin-top:30px;">
              <div class="carousel-caption">

                <h1>
                  <%= item.title %>
                </h1>
                <p>
                  <%= item.year %>
                </p>
              </div>
            </div>
          </div>
          <% }) %>

      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span></a>      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span></a></div>
    </div>
  </section>
  <!-- Slider Section -->
  <!-- Service Section -->
  <section id="services" class="section services">
    <a href="./items?item=in_theaters"><i class="movie">最新电影</i></a>
    <div class="row">
      <% douban.in_theaters.forEach(function(item,index){%>
        <div class="col-md-2" style="margin-top:40px;">
          <ul>
            <li><a href="/douban/detail?id=<%= item.id %>"><img src="<%= item.images.medium %>" alt="<%= item.title %>"></a></li>
            <li>
              <a href="/douban/detail?id=<%= item.id %>">
                <%= item.title %>
              </a>
            </li>
          </ul>
        </div>
        <% }) %>

    </div>
  </section>
  <!-- Service Section -->

  <!-- portfolio grid section -->
  <section id="portfolio" class="section portfolio">
    <a href="./items?item=top250"><i class="movie">最热电影</i></a>
    <div class="container-fluid">
      <div class="row">
        <% douban.top250.forEach(function(item,index){%>
          <div class="col-sm-2 portfolio-item">
            <a href="work-details.html" class="portfolio-link">
              <div class="caption">
                <div class="caption-content">
                  <h3>
                    <%= item.title %>
                  </h3>
                  <h4>
                    <%= item.original_title %>
                  </h4>
                </div>
              </div>
              <img src="<%= item.images.medium %>" alt="<%= item.title %>"> </a>
          </div>
          <% }) %>
      </div>
    </div>
  </section>
  <!-- portfolio grid section -->

  <!-- Testimonials section -->
  <section id="testimonials" class="section testimonials no-padding" style="padding-top:50px;">
    <a href="./items?item=coming_soon"><i class="movie">即将上映</i></a>
    <div class="container-fluid">
      <div class="row">
        <% douban.comingSoon.forEach(function(item,index){%>
          <div class="col-md-2" style="margin-top:40px;">
            <ul>
              <li><a href="##"><img src="<%= item.images.medium %>" alt="<%= item.title %>"></a></li>
              <li>
                <a href="##">
                  <%= item.title %>
                </a>
              </li>
            </ul>
          </div>
          <% }) %>

      </div>
    </div>
  </section>
  <!--koubei-->
  <section id="service" class="section testimonials" style="margin:120px auto;">
    <a href="./items?item=us_box"><i class="movie">北美排行榜</i></a>
    <div class="container-fluid">
      <div class="row">
        <% douban.us_box.forEach(function(item,index){%>
          <div class="col-md-2" style="margin-top:40px;">
            <ul>
              <li><a href="##"><img src="<%= item.subject.images.medium %>" alt="<%= item.subject.title %>"></a></li>
              <li>
                <a href="##">
                  <%= item.subject.title %>
                </a>
              </li>
            </ul>
          </div>
          <% }) %>

      </div>
    </div>
  </section>


  <%- include footer %>
    <div class="scrollup">
      <a href="#"><i class="fa fa-chevron-up"></i></a>
    </div>
    <style>
      .scrollup {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        opacity: .3;
        position: fixed;
        bottom: 20px;
        right: 10px;
        color: #fff;
        cursor: pointer;
        background-color: #000;
        z-index: 1000;
      }

      .scrollup a {
        transition: 0.2s ease-in-out;
      }

      .scrollup a i {
        font-size: 13px;
        position: absolute;
        opacity: 1;
        color: #fff;
        left: 50%;
        top: 50%;
        margin-top: -7px;
        margin-left: -6px;
        text-decoration: none;
      }

      .scrollup:hover {
        background: red;
      }
    </style>

    <!-- JS FILES -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.flexslider-min.js"></script>
    <script src="js/retina.min.js"></script>
    <script src="js/modernizr.js"></script>
    <script src="js/main.js"></script>
</body>

</html>